<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月22日 18:30
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-card class="user-illustrate" shadow="always">
      <div class="user-info-container" @click="handleUserCard(userIllustrate.userId)">
        <el-image
          style="width: 65px; height: 65px;border-radius: 50%"
          :src="![null, undefined, ''].includes(userIllustrate.avatar) ? userIllustrate.avatar : require('@/assets/images/profile.jpg')"
          fit="cover"
        />
        <div class="user-mark">
          <div>
            <span class="user-username">
              {{userIllustrate.userName}}
              <svg-icon v-if="userIllustrate.gender === 0 || userIllustrate.sex === '0'" icon-class="man" />
              <svg-icon v-if="userIllustrate.gender === 1 || userIllustrate.sex === '1'" icon-class="woman" />
            </span>
          </div>
          <div>
            <span class="user-signature">
              {{!['', null, undefined].includes(userIllustrate.summary) ? userIllustrate.summary : '这家伙很懒，什么都没有留下'}}
            </span>
          </div>
        </div>
      </div>
      <div class="user-statistics-container" @click="handleUserCard(userIllustrate.userId)">
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.blogCount) ? 0 : userIllustrate.blogCount}}</span>
            </div>
            <div>
              <span>文章</span>
            </div>
          </div>
        </div>
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.commentCount) ? 0 : userIllustrate.commentCount}}</span>
            </div>
            <div>
              <span>评论</span>
            </div>
          </div>
        </div>
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.likeCount) ? 0 : userIllustrate.likeCount}}</span>
            </div>
            <div>
              <span>点赞</span>
            </div>
          </div>
        </div>
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.collectionCount) ? 0 : userIllustrate.collectionCount}}</span>
            </div>
            <div>
              <span>收藏</span>
            </div>
          </div>
        </div>
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.followMeCount) ? 0 : userIllustrate.followMeCount}}</span>
            </div>
            <div>
              <span>粉丝</span>
            </div>
          </div>
        </div>
        <div class="statistics-content">
          <div class="statistics-info">
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.followCount) ? 0 : userIllustrate.followCount}}</span>
            </div>
            <div>
              <span>关注</span>
            </div>
          </div>
        </div>
      </div>

      <div class="user-statistics-container" @click="handleUserCard(userIllustrate.userId)" style="padding: 10px;background-color: rgba(211, 205, 205, 0.3);">
        <div class="statistics-content" style="width: 33.3%">
          <div class="statistics-info">
            <div>
              <span>获赞</span>
            </div>
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.likedCount) ? 0 : userIllustrate.likedCount}}</span>
            </div>
          </div>
        </div>
        <div class="statistics-content" style="width: 33.3%">
          <div class="statistics-info">
            <div>
              <span>被踩</span>
            </div>
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.dislikedCount) ? 0 : userIllustrate.dislikedCount}}</span>
            </div>
          </div>
        </div>
        <div class="statistics-content" style="width: 33.3%">
          <div class="statistics-info">
            <div>
              <span>被收藏</span>
            </div>
            <div class="statistics-info-count">
              <span>{{[null, '', undefined].includes(userIllustrate.collectionedCount) ? 0 : userIllustrate.collectionedCount}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="user-statistics-container" v-if="dvShowIllustrateButton">
        <el-button class="user-illustrate-button" v-if="userIllustrate.dvFollow === 1" @click="handleFollow(0)" :disabled="getUserId() === String(userIllustrate.userId)" type="info" round><svg-icon icon-class="follow-cancel" />&nbsp;&nbsp;取消关注</el-button>
        <el-button class="user-illustrate-button" v-else @click="handleFollow(1)" :disabled="getUserId() === String(userIllustrate.userId)" type="danger" round><svg-icon icon-class="follow" />&nbsp;&nbsp;关注</el-button>
        <el-button class="user-illustrate-button" :disabled="getUserId() === String(userIllustrate.userId)" type="primary" round><svg-icon icon-class="wChat" />&nbsp;&nbsp;私信</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { getUserIllustrate } from "@/api/blog/baseUser";
import { addFollow, delFollow } from "@/api/blog/follow";
import { Vue, Component, Prop } from "vue-property-decorator";
import { getUserId } from "@/utils/auth";

@Component({
  methods: { getUserId }
})
export default class index extends Vue {

  @Prop({ default: false })
  public dvShowIllustrateButton: any;

  @Prop()
  /** 当前登录用户信息 */
  public userIllustrate:any;

  /** 点击关注或者取消关注 */
  public handleFollow(flag: number) {
    if (flag === 1) {
      const data = {
        followUserId: this.userIllustrate.userId
      }
      addFollow(data).then((res: any) => {
        this.$modal.msgSuccess(res.msg);
        this.$emit("getUserIllustrate", this.userIllustrate.userId);
      })
    } else {
      delFollow(this.userIllustrate.userId).then((res: any) => {
        this.$modal.msgSuccess(res.msg);
        this.$emit("getUserIllustrate", this.userIllustrate.userId);
      })
    }
  }

  /** 点击用户列表用户卡片 */
  public handleUserCard(userId: any) {
    this.$router.push({path: '/userCenter?userId=' + userId});
  }

}
</script>
<style scoped lang="scss">
.user-illustrate {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  .user-info-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
    .user-mark {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap:5px;
      padding-top: 10px;
      .user-username {
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 25px;
      }
      .user-signature {
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .user-statistics-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    cursor: pointer;
    .statistics-content {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap:3px;
      text-align: center;
      font-size: 14px;
      .statistics-info {
        line-height: 25px;
        .statistics-info-count {
          span {
            font-weight: 600;
          }
        }
      }
    }
    .user-illustrate-button {
      width: 45%;
    }
  }
}
</style>
